<template>
  <el-skeleton :rows="13" animated :loading="loading">
    <div class="fac-top">
      <el-row class="manage-top">
        <el-col :span="24">
          <el-card>
            <el-form :inline="true" :model="form" class="demo-form-inline">
              <el-form-item label="设备名称">
                <el-input v-model="form.type" placeholder="请输出设备名称" />
              </el-form-item>
              <el-form-item label="设备状态">
                <el-select v-model="form.status" placeholder="请选择状态值">
                  <el-option label="正常" :value="1" />
                  <el-option label="异常" :value="0" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleQuery">
                  <el-icon> <Search /> </el-icon>Query</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button @click="handleReset"
                  ><el-icon><Refresh /></el-icon>Reset</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button type="success" @click="handleAdd"
                  ><el-icon><Plus /></el-icon>Add</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <el-card>
        <el-row class="manage-bottom" :gutter="20">
          <el-col :span="24">
            <Facility
              v-for="sensor in sensorInfoList"
              :key="sensor.id"
              :sensor="sensor"
            />
          </el-col>
        </el-row>
        <el-row class="page-set">
          <el-pagination
            v-model:currentPage="sensorQuery.pageNo"
            v-model:page-size="sensorQuery.pageSize"
            :page-sizes="[2, 6, 16]"
            layout=" prev, pager, next, jumper,sizes,total"
            :total="total"
            @size-change="handleSizeChange"
            @update:current-page="handleCurrentChange"
            style="text-align: right"
          />
        </el-row>
      </el-card>
    </div>
  </el-skeleton>
</template>

<script setup>
import { Search, Refresh } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { getNodeManagerList } from '@/api/facility.js'
import Facility from './components/facility.vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const loading = ref(true)

const sensorInfoList = ref([])

const total = ref('')

const initSensorQuery = () => {
  return {
    pageNo: 1,
    pageSize: 6
  }
}

const sensorQuery = ref({})

sensorQuery.value = initSensorQuery()

const form = reactive({
  type: '',
  status: ''
})

const initNodeList = async () => {
  try {
    const res = await getNodeManagerList(sensorQuery.value, form)
    loading.value = false
    total.value = res.data.total
    sensorInfoList.value = res.data.records
    // console.log(res.data)
  } catch (error) {
    ElMessage.error(error)
  }
}
initNodeList()

const handleSizeChange = (val) => {
  // console.log(val)
  sensorQuery.value.pageSize = val
  sensorQuery.value.pageNo = 1
  initNodeList()
}
const handleCurrentChange = (val) => {
  sensorQuery.value.pageNo = val
  initNodeList()
}

const handleAdd = () => {
  router.push({ path: '/sensor/node/edit' })
}
const handleReset = () => {
  Object.assign(sensorQuery.value, initSensorQuery())
  form.type = ''
  form.status = ''
  initNodeList()
}
const handleQuery = () => {
  initNodeList()
}
</script>

<style lang="scss" scoped>
@media screen and (max-width: 1350px) {
  .fac-container[data-v-60cb5d0c] {
    flex: 1;
    margin: 10px;
  }
}
.manage-top {
  margin-bottom: 10px;
}
.manage-bottom {
  & :deep(.el-col-24) {
    flex: 1;
  }
  & .el-col {
    margin-bottom: 15px;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.page-set {
  justify-content: flex-end;
}
:deep(.el-descriptions__label:not(.is-bordered-label)) {
  margin-right: 0px;
}
:deep(.el-card__body) {
  padding: 18px;
}
</style>
